<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    :rules="rules"
  >
    <el-form-item label="登陆名" prop="loginName">
      <el-input v-model="ruleForm.loginName"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="pwd">
      <el-input type="password" v-model="ruleForm.pwd"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model.number="ruleForm.mobile"></el-input>
    </el-form-item>
    <el-form-item label="用户角色" prop="role">
      <el-select v-model="ruleForm.role" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="state">
      <el-select v-model="ruleForm.state" clearable placeholder="请选择">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.prevent="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: ["u"],
  data() {
    return {
      ruleForm: {
        loginName: "",
        pwd: "",
        mobile: "",
        nickName: "",
        headUrl: "",
        wxid: "",
        role: "",
        state: ""
      },
      rules: {
        loginName: [
          { required: true, message: "登陆名不能为空！" },
          {
            validator: (rule, value, callback) => {
              if (/^\S{2,10}$/.test(value)) {
                callback();
              } else {
                callback(
                  new Error("登陆名不能少于两位,大于6位的非空格的字符串!")
                );
              }
            }
          }
        ],
        mobile: [
          { required: true, message: "手机号不能为空！" },
          {
            validator: (rule, value, callback) => {
              if (/^1\d{10}$/.test(value)) {
                callback();
              } else {
                callback(new Error("手机号必须以1开头11位数字！"));
              }
            }
          }
        ],
        pwd: [
          { required: true, message: "密码不能为空！" },
          {
            validator: (rule, value, callback) => {
              if (/^\S{6,18}$/.test(value)) {
                callback();
              } else {
                callback(
                  new Error("密码不能少于六位,大于18位的非空格的字符串!")
                );
              }
            }
          }
        ]
      },
      options: [
        {
          value: "user",
          label: "用户"
        },
        {
          value: "petowners",
          label: "宠主"
        },
        {
          value: "stores",
          label: "门店"
        },
        {
          value: "supplier",
          label: "供应商"
        },
        {
          value: "admin",
          label: "超级管理员"
        }
      ],
      options1: [
        {
          value: "已通过",
          label: "已通过"
        },
        {
          value: "未通过",
          label: "未通过"
        }
      ]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("submit", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  watch: {
    u: function() {
      //这里使用了侦听器, 监听属性u的变化
      //因为这里的表单绑定的是data中的数据, 但编辑用户时, 需要使用传递过来的属性u中的数据
      //因此, 当属性u发生变化时, 需要将u中的属性赋值给data中的数据, 这样才能让表单显示要编辑的用户
      //这个问题, 之后学习了ui库后, ui库会解决, 目前我能想到的最好办法就是这种方式了.
      if (this.u) {
        this.ruleForm = {
          _id: this.u._id,
          loginName: this.u.loginName,
          mobile: this.u.mobile,
          role: this.u.role,
          state: this.u.state
        };
      }
    }
  }
};
</script>
<style scoped>
.demo-ruleForm {
  width: 350px;
}
</style>
